<!-- 需求信息 -->
<template>
	<view class="container">
		<text class="title">需求信息</text>
		<view class="list">
			<view class="list-item">
				<text class="label">商品标题：</text>
				<input class="input" type="text" value="" placeholder="请输入商品标题,建议商品描述+规格"
					placeholder-style="color: #999;" />
			</view>
			<view class="list-item">
				<text class="label">商品价格：</text>
				<input class="input" type="digit" value="" placeholder="请输入商品价格" placeholder-style="color: #999;" />
				<text class="unit">元</text>
			</view>
			<view class="list-item">
				<text class="label">库存量：　</text>
				<input class="input" type="digit" value="" placeholder="请输入库存量" placeholder-style="color: #999;" />
				<text class="unit">袋</text>
			</view>
			<view class="list-item">
				<text class="label">是否上架：</text>
				<radio-group class="radio-group" @change="radioChange" v-for="(item, index) in items" :key="item.value">
					<label>
						<radio class="radio" :value="item.value" :checked="item.checked" color="#FE3333" />
						<text class="text">{{item.name}}</text>
					</label>
				</radio-group>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	const items = ref([{
			value: '1',
			name: '上架',
			checked: true
		},
		{
			value: '0',
			name: '下架',
			checked: false
		}
	]);

	const radioChange = (e) => {
		const value = e.detail.value;

		items.value.forEach(item => {
			item.checked = item.value === value;
		});
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx 25rpx 0;

		.title {
			font-weight: bold;
			font-size: 30rpx;
			color: #222222;
			line-height: 1.5;
			padding-left: 4rpx;
		}
	}

	.list {
		background-color: white;
		border-radius: 20rpx;
		padding-left: 30rpx;
		margin-top: 30rpx;

		&-item {
			display: flex;
			align-items: center;
			height: 100rpx;
			padding-right: 20rpx;
			border-bottom: 1rpx solid #F3F3F3;

			&:last-child {
				border-bottom-width: 0;
			}

			.label {
				flex-shrink: 0;
				font-size: 28rpx;
				color: #222222;
			}

			.input {
				flex-grow: 1;
				font-size: 28rpx;
				color: #222222;
			}

			.unit {
				flex-shrink: 0;
				font-size: 28rpx;
				color: #222222;
			}

			.radio-group {
				display: flex;
				align-items: center;
				margin-left: 10rpx;

				.radio {
					transform: scale(0.8);
				}

				.text {
					font-size: 28rpx;
					color: #222222;
					margin-left: 4rpx;
				}
			}
		}
	}
</style>